<template>
  <CloudCharts :options="options"></CloudCharts>
</template>
<script lang="ts" setup>
import { useLineCharts } from '@/components/cloud-charts'
import { formatChartsUnix, getChartData } from '@/utils'
import dayjs from 'dayjs'
import { getApiNodeMemoryApi } from '@/apis/modules/resolve/statistics'
interface IProps {
  timeDate: any
  params: any
  nodeId: any
  mathRandom: number
  isHour: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  isHour: true
})

const time = ref({
  start_time: '',
  end_time: ''
})

const clientData = ref([])
const consumeData = ref([])
const times = ref<any[]>([])
const unitData = ref<string>('day')
const dataSource = ref<any[]>([
  {
    label: '',
    data: clientData
  },
  {
    label: '',
    data: consumeData
  }
])

const { options } = useLineCharts({
  categories: times,
  dataSource: dataSource,
  legendPosition: 'tr',
  valueFormatter: (val) => {
    if (val !== '-') {
      return (val / 100).toFixed(2) + '%'
    } else {
      return '-'
    }
  },
  YAxisFormatter: (val) => (val / 100).toFixed(0) + '%',
  labelFormatter: (val) => formatChartsUnix(val, unitData.value)
})

/** 获取内存使用率 */
const getLinkNumber = () => {
  const { start_time, end_time } = time.value
  getApiNodeMemoryApi({
    start_time: Number(start_time),
    end_time: Number(end_time),
    node_ids:
      props.params.node_ids.length > 0 ? props.params.node_ids : props.nodeId
  }).then((res) => {
    const step = ref(1)
    if (Number(end_time) - Number(start_time) < 25200) {
      step.value = 0.25
    }
    const list = res.list || [{ node_name: '', list: [] }]
    const seriesDataList = ref<any[]>([])
    list.forEach((item, index) => {
      if (index === 0) {
        const {
          seriesData: value,
          xAxisData,
          unit
        } = getChartData(
          item.list || [],
          Number(start_time),
          Number(end_time),
          'value',
          'time',
          step.value
        )
        seriesDataList.value.push({
          label: item.node_name,
          data: value
        })
        times.value = xAxisData
        if (Number(end_time) - Number(start_time) < 25200) {
          unitData.value = 'hour'
        } else {
          unitData.value = unit as string
        }
      } else {
        const { seriesData: value } = getChartData(
          item.list || [],
          Number(start_time),
          Number(end_time),
          'value',
          'time',
          step.value
        )
        seriesDataList.value.push({
          label: item.node_name,
          data: value
        })
      }
    })
    dataSource.value = seriesDataList.value
  })
}

onMounted(() => {
  timeReset()
})

// 获取当前时间的分钟为00秒

const timeReset = () => {
  if (props.isHour) {
    const currentMinuteStart = dayjs()
      .startOf('minute')
      .format('YYYY-MM-DD HH:mm:00')
    time.value.start_time = String(dayjs(currentMinuteStart).unix() - 21600)
    time.value.end_time = String(dayjs(currentMinuteStart).unix())
  } else {
    time.value.start_time = String(dayjs(props.timeDate).unix())
    time.value.end_time = String(dayjs(props.timeDate).unix() + 86399)
  }
}

watch(
  () => props.mathRandom,
  () => {
    timeReset()
    getLinkNumber()
  }
)
</script>
